<template>
  <div class="container">
    <div class="follow-list">
      <div
        v-for="(item, index) in fanList"
        class="follow-cell with-grey-bottom-border"
      >
        <div class="avatar">
          <img :src="item.avatar" alt="" />
        </div>
        <div class="nickname">{{ item.nickname }}</div>
        <button
          v-if="item.is_mutual === 1"
          @click="
            showUnfollowPanel = true;
            currentId = item.id;
          "
        >
          相互关注
        </button>
        <button @click="follow(item.id, index)" class="follow-btn" v-else>
          + 关注
        </button>
      </div>
    </div>
    <load-more @loadMore="loadMore"></load-more>
    <unfollow
      v-if="showUnfollowPanel"
      @panelClose="showUnfollowPanel = false"
      @unFollow="unFollow"
    ></unfollow>
  </div>
</template>

<script>
import unfollow from "./component/unfollow.vue";
import { getFanList } from "@/api/profile";
import loadMore from "@/components/load-more";
import { follow } from "@/api/dynamics";
export default {
  data() {
    return {
      fanList: [],
      page: 1,
      isAll: false,
      loading: false,
      showUnfollowPanel: false,
      currentId: null
    };
  },
  methods: {
    unFollow() {
      follow({ user: this.currentId }).then(res => {
        if (res.status === 200) {
          this.fanList.forEach((item, index) => {
            if (item.id === this.currentId) {
              this.fanList[index].is_mutual = 0;
              return;
            }
          });
        }
      });
    },
    follow(id, index) {
      follow({ user: id }).then(res => {
        if (res.status === 200) {
          this.fanList[index].is_mutual = 1;
        }
      });
    },
    getFanList(page) {
      getFanList({
        page
      }).then(res => {
        if (res.status === 200) {
          this.fanList.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1000
            });
          }
        }
        this.loading = false;
      });
    },
    loadMore() {
      if (this.loading || this.isAll || this.fanList.length === 0) return;
      this.loading = true;
      this.getFanList(++this.page);
    }
  },
  created() {
    this.getFanList(1);
  },
  components: {
    unfollow,
    loadMore
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;

  .follow-list {
    margin-top: 0.48rem;

    .follow-cell {
      height: 3rem;
      background: #fff;
      position: relative;
      display: flex;
      padding: 0.5rem 3.2%;

      .avatar {
        border-radius: 50%;
        height: 2rem;
        width: 2rem;
        background: #dfdfdf;
        margin-right: 0.48rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .nickname {
        line-height: 2rem;
        color: rgba(68, 68, 68, 1);
        font-weight: bold;
        font-size: 0.64rem;
      }

      button {
        background: rgba(245, 245, 245, 1);
        border: none;
        border-radius: 0.24rem;
        color: rgba(102, 102, 102, 1);
        font-size: 0.48rem;
        height: 1.2rem;
        line-height: 1.2rem;
        width: 2.68rem;
        position: absolute;
        right: 3.2%;
        top: 0.9rem;
      }
      .follow-btn {
        background: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 0.24rem;
        color: #0078ff;
        font-size: 0.48rem;
        height: 1.2rem;
        line-height: 1.2rem;
        width: 2.68rem;
        position: absolute;
        right: 3.2%;
        top: 0.9rem;
        border: 0.02rem solid #0078ff;
      }
    }
  }
}
</style>
